<template>
  <el-card>
    <div slot="header">
      <span>基本信息</span>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="报销部门" prop="model.departmentId">
            <el-select
              v-model="model.departmentId"
              placeholder="请选择报销部门"
              clearable
              :disabled="!controlData.isSynthesizeDeptStatic"
              @change="deptIdChange"
            >
              <el-option
                v-for="item in controlData.depOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请日期" prop="model.applicationDate">
            <el-date-picker
              v-model="model.applicationDate"
              clearable
              size="small"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择申请日期"
              :disabled="!controlData.isSynthesizeDeptStatic"
              @change="applicationDateChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="登记日期" prop="model.recordDate">
            <span>{{ model.recordDate | date }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="原借款" prop="model.originalLoan">
            <el-input-number
              v-model="model.originalLoan"
              :disabled="(controlData.workflow || {}).taskName !== '发起申请'"
              :controls="false"
              placeholder="请输入原借款"
              :precision="2"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退/补" prop="model.refund">
            <el-input-number
              v-model="model.refund"
              :disabled="(controlData.workflow || {}).taskName !== '发起申请'"
              :controls="false"
              :precision="2"
              placeholder="请输入退/补"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="登记人" prop="model.registrant">
            <span>{{ model.registrant }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="报销人" prop="model.applicantUserId">
            <el-select
              v-model="model.applicantUserId"
              placeholder="请选择报销人"
              clearable
              filterable
              :disabled="!controlData.isSynthesizeDeptStatic"
              @change="applicantUserChange"
            >
              <el-option
                v-for="item in controlData.userOptions"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="领款人" prop="model.payeeUserId">
            <el-select
              v-model="model.payeeUserId"
              placeholder="请选择领款人"
              clearable
              filterable
              :disabled="!controlData.isSynthesizeDeptStatic"
              @change="payeeUserChange"
            >
              <el-option
                v-for="item in controlData.userOptions"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报销月份" prop="model.month">
            <el-date-picker
              v-model="model.month"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择月"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    model: {
      type: Object,
    },
    controlData: {
      type: Object,
    },
  },
  methods: {
    deptIdChange(deptId) {
      if (typeof deptId === "string" && deptId.trim().length > 0) {
        const depOptions = this.controlData.depOptions;
        if (Array.isArray(depOptions)) {
          const findOption = depOptions.find((item) => item.id === deptId);
          this.model.departmentName = findOption ? findOption.text : undefined;
        }
      }
    },
    applicantUserChange(applicantUserId) {
      if (
        typeof applicantUserId === "string" &&
        applicantUserId.trim().length > 0
      ) {
        const userOptions = this.controlData.userOptions;
        if (Array.isArray(userOptions)) {
          const findOption = userOptions.find(
            (item) => item.userId === applicantUserId
          );
          this.model.applicant = findOption ? findOption.userName : undefined;
        }
      }
    },
    payeeUserChange(payeeUserId) {
      if (typeof payeeUserId === "string" && payeeUserId.trim().length > 0) {
        const userOptions = this.controlData.userOptions;
        if (Array.isArray(userOptions)) {
          const findOption = userOptions.find(
            (item) => item.userId === payeeUserId
          );
          this.model.payee = findOption ? findOption.userName : undefined;
        }
      }
    },
    applicationDateChange(date) {
      this.model.recordDate = date;
    },
  },
};
</script>
